<template>
  <div class="calendar-e-line-wrap">
    <div class="content-top">
      <Card>
        <div class="fileter-wrap" slot="title">
          <Form :label-width="80" inline>
            <FormItem label="用气模式">
              <Select
                size="small"
                style="width:130px"
                v-model="usegasMode"
                placeholder="请选择"
                label-in-value
                @on-change="changeModeHandle"
              >
                <Option :value="1">主用气量模式</Option>
                <Option :value="2">小用气量模式</Option>
              </Select>
            </FormItem>
            <FormItem label="日期显示">
              <i-switch v-model="showDate" @on-change="changeShowDataHandle">
                <span slot="open">开</span>
                <span slot="close">关</span>
              </i-switch>
            </FormItem>
          </Form>
        </div>
        <div class="chart-box">
          <e-line :chartData="eLineChartData" />
        </div>
      </Card>
    </div>
    <div class="content-bottom">
      <Card>
        <div class="chart-box">
          <e-calendar :chartData="calendarData" />
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
export default {
  name: 'calendar-eline',
  props: {
    calendarData: {
      type: Object
    },
    eLineData: {
      type: Object
    }
  },
  components: {
    ELine: () => import('@/commons/charts/ELine'),
    ECalendar: () => import('@/commons/charts/ECalendar')
  },
  computed: {
    eLineChartData() {
      const { grid, ...rest } = this.eLineData
      return {
        ...rest,
        grid: {
          ...grid,
          left: '3%'
        }
      }
    }
  },
  beforeDestroy() {
    this.usegasMode = 1
    this.showDate = false
  },
  data() {
    return {
      usegasMode: 1,
      showDate: false
    }
  },
  methods: {
    changeModeHandle(val) {
      this.$emit('change-usegas-mode', val)
    },
    changeShowDataHandle(val) {
      this.$emit('change-show-date', val)
    }
  }
}
</script>
<style lang="less" scoped>
.calendar-e-line-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .content-top,
  .content-bottom {
    flex: 1;
  }
  .content-top {
    margin-bottom: 5px;
  }

  .chart-box {
    width: 100%;
    height: 100%;
  }
}
</style>
